<template>
  <div class="home-more" ref="homeMore">
    <a-modal
      v-model="Visible"
      title="详情信息"
      centered
      width="740px"
      :getContainer="getContainer"
      okText="关闭"
    >
      <div class="home-more-base">
        <div class="home-more-base-left">
          <img
            :src="dataSource.viewCoverAddress ? 'tgcos/' + dataSource.viewCoverAddress : $imgUrl + '/lcd-icon-home-emtry.png'"
            :alt="dataSource.viewCoverAddress ? 'tgcos/' + dataSource.viewCoverAddress : $imgUrl + '/lcd-icon-home-emtry.png'"
          />
        </div>
        <div class="home-more-base-right">
          <p>
            <svg-icon type="home-base" />
            <span class="home-base-span">基本信息</span>
          </p>
          <p>
            视图名称：
            <span>{{ dataSource.viewName || '' }}</span>
          </p>
          <p>
            使用状态：
            <em
              :class="['home-base-status', { active: dataSource.state === 1 }]"
            >{{ status[`state${dataSource.state}`] || '' }}</em>
          </p>
          <p>
            创建时间：
            <span>{{ getComputedTime(dataSource.viewCreateTime) }}</span>
          </p>
        </div>
      </div>
      <div class="home-more-list">
        <div class="home-more-tile">
          <svg-icon type="home-base" />
          <span>关联信息</span>
        </div>
        <a-table
          :loading="loading"
          class="table-area"
          :columns="columns"
          :data-source="associatedUserInfo"
          :rowKey="(record, index) => index"
          :scroll="{ y: 200 }"
          :pagination="{
            size: 'small',
            defaultCurrent: pageNum,
            total,
            defaultPageSize: 10
          }"
          @change="handlePage"
        >
          <template slot="userAccount" slot-scope="scope">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ scope }}</span>
              </template>
              {{ scope }}
            </a-tooltip>
          </template>
          <template slot="phoneNumber" slot-scope="scope">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ (!scope || scope == 0) ? '-' : scope }}</span>
              </template>
              {{ (!scope || scope == 0) ? '-' : scope }}
            </a-tooltip>
          </template>
          <template slot="emailAddress" slot-scope="scope">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ (!scope || scope == 0) ? '-' : scope }}</span>
              </template>
              {{ (!scope || scope == 0) ? '-' : scope }}
            </a-tooltip>
          </template>
        </a-table>
      </div>
      <template slot="footer">
        <a-button  type="primary" @click="handleCancel">关闭</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'MoreModel',
  props: {
    showVisible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: Object,
      default: () => ({})
    },
    pageNum: {
      type: Number,
      default: 1
    }
  },
  computed: {
    Visible: {
      get () {
        return this.showVisible
      },
      set (val) {
        this.$emit('update:showVisible', val)
      }
    },
    associatedUserInfo () {
      return this.dataSource?.associatedUserInfo?.list || []
    },
    total () {
      return this.dataSource?.associatedUserInfo?.total || 0
    }
  },
  data () {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          customRender: (text, record, index) => ((this.current - 1) * 10) + (index + 1),
          width: 60
        },
        {
          title: '账号',
          dataIndex: 'userAccount',
          key: 'userAccount',
          width: 200,
          scopedSlots: {
            customRender: 'userAccount'
          }
        },
        {
          title: '手机号',
          dataIndex: 'phoneNumber',
          key: 'phoneNumber',
          width: 120,
          // customRender: record => (!record || record == 0) ? '-' : record,
          scopedSlots: {
            customRender: 'phoneNumber'
          }
        },
        {
          title: '邮箱',
          dataIndex: 'emailAddress',
          key: 'emailAddress',
          // customRender: record => (!record || record == 0) ? '-' : record,
          scopedSlots: {
            customRender: 'emailAddress'
          }
        },
        {
          title: '关联时间',
          dataIndex: 'associatedTime',
          key: 'associatedTime',
          width: 180,
          customRender: (text, record, index) => this.getComputedTime(record.associatedTime)
        }
      ],
      status: {
        'state1': '已使用',
        'state-1': '未使用'
      },
      current: 1
    }
  },
  methods: {
    getContainer () {
      return this.$refs.homeMore
    },
    getTableOffset () {
      this.$nextTick(() => {
        let wTbody = document.getElementsByClassName('ant-table-tbody')[0]?.offsetWidth
        document.getElementsByClassName('ant-table-header')[0].style.width = wTbody + 'px'
        document.getElementsByClassName('ant-table-header')[0].getElementsByTagName('table')[0].style.width = wTbody + 'px'
      })
    },
    handleCancel () {
      this.$emit('update:showVisible', false)
    },
    handlePage ({ current }) {
      this.current = current
      this.$emit('handlePageCurrent', this.dataSource.viewId, current)
    },
    getComputedTime(data) {
      return data ? moment(data).format('YYYY-MM-DD HH:mm:ss') : ''
    }
  },
  mounted () {
    this.current = 1
    this.getTableOffset()
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/vars.less";
@import "~@/styles/cover.less";
.home-more {
  /deep/ .ant-modal-root {
    .ant-modal-content {
      background-color: @dark-color-3;
    }
    .ant-modal-header {
      padding: 13px 16px;
      box-sizing: border-box;
      border-bottom: 1px solid
        lighten(@dark-color, 31.96% - lightness(@dark-color));
      background-color: @dark-color-3;
      font-size: 16px;
      color: lighten(@dark-color, 100% - lightness(@dark-color));
    }
    .ant-modal-close-x {
      color: lighten(@dark-color, 100% - lightness(@dark-color));
    }
    .ant-modal-body {
      padding: 0;
      .home-more-base {
        display: flex;
        justify-content: flex-start;
        padding: 16px;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        .home-more-base-left {
          width: 226px;
          height: 127px;
          // border: 1px solid @primary-color;
          img {
            display: inline-block;
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
          }
        }
        .home-more-base-right {
          margin-left: 32px;
          flex: 1;
          height: 127px;
          p {
            padding-left: 24px;
            box-sizing: border-box;
            font-size: 14px;
            color: lighten(@dark-color, 75.2% - lightness(@dark-color));
            &:first-child {
              padding-left: 0;
            }
            .home-base-span {
              color: lighten(@dark-color, 99.9% - lightness(@dark-color));
              font-size: 16px;
              padding-left: 8px;
              box-sizing: border-box;
            }
            span {
              color: lighten(@dark-color, 99.9% - lightness(@dark-color));
            }
            .home-base-status {
              display: inline-block;
              width: 52px;
              height: 20px;
              border-radius: 4px;
              font-style: normal;
              font-size: 12px;
              text-align: center;
              color: lighten(@dark-color, 47.2% - lightness(@dark-color));
              border: 1px solid
                lighten(@dark-color, 47.2% - lightness(@dark-color));
              &.active {
                color: @success-color;
                border: 1px solid @success-color;
              }
            }
          }
        }
      }
      .home-more-list {
        width: 100%;
        .home-more-tile {
          padding-left: 16px;
          box-sizing: border-box;
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 16px;
          margin-bottom: 8px;
          span {
            padding-left: 6px;
          }
        }
        .table-area {
          padding: 0 16px 16px 16px;
          box-sizing: border-box;
          .ant-table-header {
            background: lighten(@dark-color, 21.2% - lightness(@dark-color));
            .ant-table-thead > tr > th {
              padding: 8px;
              box-sizing: border-box;
              background: lighten(@dark-color, 21.2% - lightness(@dark-color));
              border: none;
              color: lighten(@dark-color, 75.2% - lightness(@dark-color));
              font-size: 16px;
            }
          }
          .ant-table-body {
            overflow-y: auto !important;
          }
          .ant-table-tbody > tr {
            &:nth-child(2n - 1) {
              background: @dark-color-3;
            }
            background: lighten(@dark-color, 21.2% - lightness(@dark-color));
            td {
              padding: 8px;
              box-sizing: border-box;
              border: none;
              font-size: 16px;
              word-break: break-all;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              cursor: pointer;
            }
            &:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
              > td {
              background: transparent;
            }
          }
        }
      }
    }
  }
  .ant_pagination_reset();
}
</style>